<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #pasteText {
        width: 100%;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- id不用获取元素就能在js中使用的尝试 -->
    <p id="codeText">
      // 复制文本
      // 选择目标元素
      const target = document.querySelector("div.target");

      // 添加粘贴事件监听器
      target.addEventListener("paste", (event) => {
      // 阻止默认粘贴行为
      event.preventDefault();

      // 获取剪贴板内容并转换为大写
      let paste = (event.clipboardData || window.clipboardData).getData("text");
      paste = paste.toUpperCase();

      // 获取当前选区并插入转换后的内容
      const selection = window.getSelection();
      if (!selection.rangeCount) return;
      selection.deleteFromDocument();
      selection.getRangeAt(0).insertNode(document.createTextNode(paste));
      selection.collapseToEnd();
      });
    </p>
    <img name="img" src="" alt="">
    <button id="copyButton" type="button">复制</button>
    <hr />
    <button type="button" id="paste">粘贴</button>
    <textarea id="pasteText" type="text" placeholder="可以尝试粘贴" value=""></textarea>
  </body>
  <script type="text/javascript">
    // 复制
    copyButton.onclick = function() {
      navigator.clipboard
        .writeText(codeText.innerText)
        .then(() => alert("复制成功！"))
    }
    // 读取系统剪切板内容进行粘贴
    paste.onclick = function() {
      navigator.clipboard
        .readText()
        .then(text => pasteText.value = text)
    }
    /**
     * 粘贴事件监听
     * 当ctrl+c复制图片并粘贴之后,clipboaddata的
     * DataTransferItem {kind: "string", type: "text/html"}
     * 当右键复制图片并粘贴之后,
     * DataTransferItem {kind: "file", type: "image/png"}
     * 所以这里对于图片如果想要获取粘贴的图片进行上传,只有直接右键复制的图片才能识别到,ctrl+c的并不能识别.....
     */
    document.body.addEventListener('paste', (e) => {

      for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
        var item = e.clipboardData.items[i];
        if (item.kind === "string") {
          item.getAsString(function(str) {
            console.log('粘贴了东西', str);
          })
        } else if (item.kind === "file") {
            var pasteFile = item.getAsFile();
            // pasteFile就是获取到的文件
            const url = window.URL.createObjectURL(pasteFile);
            const img = document.createElement('img');
            img.src = url;
            img.height = '106';
            document.body.append(img);
        }
      }
    })
  </script>
</html>